<template>
  <div class="play-list" v-if="detail">
    <header>
      <div
        class="play-list-return iconfont icon-zhiyuanfanhui9"
        @click="$router.back()"
      ></div>
      <div
        class="mask"
        :style="{
          backgroundImage: `url('${detail.coverImgUrl}?imageView=1&type=webp&thumbnail=247x0')`,
        }"
      ></div>
      <div class="thumb">
        <div class="thumb-tag">歌单</div>
        <img :src="detail.coverImgUrl+'?imageView=1&type=webp&thumbnail=247x0'" alt="" />
        <span>
          <img src="@/assets/headphone.svg" alt="" />
          {{ detail.playCount | parsePlayCount }}</span
        >
      </div>
      <div class="right">
        <h3>{{ detail.name }}</h3>
        <div class="creator">
          <img :src="detail.creator.avatarUrl" alt="" />
          <span>{{ detail.creator.nickname }}</span>
        </div>
      </div>
    </header>
    <section class="list">
      <SongListItem
        v-for="(item, index) in detail.tracks"
        :key="item.id"
        :item="item"
        :order="index + 1"
        @click.native="
          $emit('update:currentSong', item),
            $emit('update:currentPlayList', detail.tracks)
        "
        :currentSong="currentSong"
        :playing="playing"
      ></SongListItem>
    </section>
    <section class="review">
      <h4>最新评论({{ amount }})</h4>
      <ul>
        <li v-for="(revItem, index) in review" :key="index">
          <img :src="revItem.user.avatarUrl" alt="" />
          <div class="right">
            <div class="top">
              <div class="review-name">
                {{ revItem.user.nickname }}
                <div class="like">
                  <span>{{
                    revItem.likedCount == 0 ? "" : revItem.likedCount
                  }}</span>
                  <i class="iconfont icon-dianzan"></i>
                </div>
              </div>
              <div class="review-time">{{ revItem.timeStr }}</div>
            </div>
            <div class="review-comment">{{ revItem.content }}</div>
          </div>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
import SongListItem from "../components/SongListItem.vue";
export default {
  components: { SongListItem },
  props: {
    currentSong: [Object, null],
    playing: Boolean,
  },
  data() {
    return {
      detail: null,
      review: [],
    };
  },
  computed: {
    amount: function () {
      return this.review.length;
    },
  },
  created: function () {
    this.getPlayListDetail(this.$route.query.id);
    this.getPlayListComment(this.$route.query.id);
  },
  beforeRouteUpdate(to, from, next) {
    this.getPlayListDetail(to.query.id);
    this.getPlayListComment(to.query.id);
    next();
  },
  methods: {
    getPlayListDetail: function (id) {
      this.axios
        .get("https://apis.netstart.cn/music/playlist/detail", {
          params: { id },
        })
        .then((res) => {
          this.detail = res.data.playlist;
        });
    },
    // 获取评论的方法
    getPlayListComment: function (id) {
      this.axios
        .get("https://apis.netstart.cn/music/comment/playlist", {
          params: { id },
        })
        .then((res) => {
          this.review = res.data.comments;
          console.log(this.review);
        });
    },
  },
};
</script>

<style lang="less">
.play-list {
  header {
    display: flex;
    padding: 30px 15px;
    position: relative;
    overflow: hidden;
    .play-list-return {
      position: absolute;
      top: 5px;
      left: 0px;
      color: #fff;
      font-size: 28px;
      width: 40px;
      height: 20px;
      line-height: 20px;
      background: rgba(0, 0, 0, 0.5);
      z-index: 9;
    }
    .mask {
      // background-color: rgb(59, 59, 59);
      background-color: rgb(0, 0, 0, 0.25);
      background-position: center center;
      background-size: cover;
      filter: blur(50px) brightness(0.6);

      transform: scale(1.5);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    .thumb {
      position: relative;
      background: red;
      width: 126px;
      .thumb-tag {
        position: absolute;
        z-index: 3;
        top: 10px;
        left: 0;
        padding: 0 8px;
        height: 17px;
        color: #fff;
        font-size: 9px;
        text-align: center;
        line-height: 17px;
        background-color: rgba(217, 48, 48, 0.8);
        border-top-right-radius: 17px;
        border-bottom-right-radius: 17px;
      }
      img {
        vertical-align: middle;
      }
      span {
        position: absolute;
        top: 0px;
        right: 0px;
        color: white;
        // 文本阴影，可以做字体高亮效果
        text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
        font-size: 12px;
        height: 18px;
        display: flex;
        align-items: center;
        display: block;
        width: 100%;
        text-align: right;
        padding-right: 5px;
        background-image: linear-gradient(
          90deg,
          rgba(0, 0, 0, 0),
          rgba(0, 0, 0, 0.2)
        );
        img {
          height: 12px;
          width: 12px;
          margin-right: 1px;
        }
      }
    }
    .right {
      flex: 1;
      margin-left: 16px;
      color: #fff;
      font-size: 17px;
      .creator {
        display: flex;
        align-items: center;
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
        span {
          color: hsla(0, 0%, 100%, 0.7);
        }
      }
    }
  }
  .review {
    margin-top: 20px;
    h4 {
      font-size: 14px;
      color: #666;
      padding: 0 10px;
    }
    ul {
      li {
        padding-top: 10px;
        // border-bottom: 2px solid red;
        display: flex;
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          margin: 0 10px;
        }
        .right {
          flex: 1;
          display: flex;
          flex-direction: column;
          padding: 0 10px 11px 0;
          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
          .top {
            .review-name {
              font-size: 14px;
              color: #666;
              display: flex;
              justify-content: space-between;
              .like {
                color: #999;
                span {
                  margin-right: 5px;
                }
              }
            }
            .review-time {
              font-size: 12px;
              color: #999;
            }
          }
          .review-comment {
            font-size: 15px;
            color: #333;
            margin-top: 5px;
          }
        }
      }
    }
  }
}
</style>